<template>
  <div class="menu-item-preview">
    <!-- 侧边栏模式 -->
    <div v-if="mode === 'sidebar'" class="sidebar-item" :style="{ paddingLeft: `${level * 16 + 16}px` }">
      <div class="item-content" :class="{ 'has-children': hasChildren }">
        <div class="item-main" @click="toggleExpanded">
          <i :class="menu.icon || 'fa fa-file'" class="item-icon"></i>
          <span class="item-text">{{ menu.name }}</span>
          <i v-if="hasChildren" :class="expandIcon" class="expand-icon"></i>
        </div>
        <div class="item-badges">
          <el-tag v-if="menu.is_generated" size="small" type="success">生成</el-tag>
        </div>
      </div>
      
      <!-- 子菜单 -->
      <div v-if="hasChildren && expanded" class="children-container">
        <MenuItemPreview
          v-for="child in menu.children"
          :key="child.id"
          :menu="child"
          :level="level + 1"
          :mode="mode"
        />
      </div>
    </div>

    <!-- 树形模式 -->
    <div v-else class="tree-item">
      <div class="tree-node" :style="{ paddingLeft: `${level * 20}px` }">
        <div class="node-content" @click="toggleExpanded">
          <i v-if="hasChildren" :class="expandIcon" class="expand-icon"></i>
          <i v-else class="fa fa-circle expand-placeholder"></i>
          <i :class="menu.icon || 'fa fa-file'" class="node-icon"></i>
          <span class="node-text">{{ menu.name }}</span>
          <div class="node-badges">
            <el-tag v-if="menu.is_generated" size="small" type="success">自动生成</el-tag>
            <span class="path-text">{{ menu.path }}</span>
          </div>
        </div>
      </div>
      
      <!-- 子菜单 -->
      <div v-if="hasChildren && expanded" class="tree-children">
        <MenuItemPreview
          v-for="child in menu.children"
          :key="child.id"
          :menu="child"
          :level="level + 1"
          :mode="mode"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

// Props
interface Props {
  menu: any
  level: number
  mode: 'sidebar' | 'tree'
}

const props = defineProps<Props>()

// 响应式数据
const expanded = ref(true)

// 计算属性
const hasChildren = computed(() => {
  return props.menu.children && props.menu.children.length > 0
})

const expandIcon = computed(() => {
  if (!hasChildren.value) return ''
  return expanded.value ? 'fa fa-chevron-down' : 'fa fa-chevron-right'
})

// 方法
const toggleExpanded = () => {
  if (hasChildren.value) {
    expanded.value = !expanded.value
  }
}
</script>

<style lang="scss" scoped>
.menu-item-preview {
  // 侧边栏模式样式
  .sidebar-item {
    .item-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 0;
      border-radius: 4px;
      transition: all 0.3s ease;
      cursor: pointer;
      
      &:hover {
        background: rgba(255, 255, 255, 0.1);
      }
      
      .item-main {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 1;
        
        .item-icon {
          color: #00eaff;
          width: 16px;
          text-align: center;
          font-size: 14px;
        }
        
        .item-text {
          color: rgba(255, 255, 255, 0.9);
          font-size: 14px;
          flex: 1;
        }
        
        .expand-icon {
          color: rgba(255, 255, 255, 0.6);
          font-size: 12px;
          transition: transform 0.3s ease;
        }
      }
      
      .item-badges {
        display: flex;
        align-items: center;
        gap: 4px;
      }
    }
    
    .children-container {
      margin-top: 4px;
    }
  }
  
  // 树形模式样式
  .tree-item {
    .tree-node {
      .node-content {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 6px 0;
        cursor: pointer;
        border-radius: 4px;
        transition: all 0.3s ease;
        
        &:hover {
          background: rgba(255, 255, 255, 0.05);
        }
        
        .expand-icon {
          color: #00eaff;
          font-size: 12px;
          width: 12px;
          text-align: center;
          transition: transform 0.3s ease;
        }
        
        .expand-placeholder {
          color: rgba(255, 255, 255, 0.3);
          font-size: 4px;
          width: 12px;
          text-align: center;
        }
        
        .node-icon {
          color: #00eaff;
          font-size: 16px;
          width: 16px;
          text-align: center;
        }
        
        .node-text {
          color: rgba(255, 255, 255, 0.9);
          font-size: 14px;
          font-weight: 500;
        }
        
        .node-badges {
          display: flex;
          align-items: center;
          gap: 8px;
          margin-left: auto;
          
          .path-text {
            font-size: 12px;
            color: rgba(255, 255, 255, 0.5);
            font-family: 'Courier New', monospace;
          }
        }
      }
    }
    
    .tree-children {
      margin-top: 2px;
    }
  }
}

// Element Plus 标签样式覆盖
:deep(.el-tag) {
  &.el-tag--success {
    background: rgba(103, 194, 58, 0.2);
    border-color: rgba(103, 194, 58, 0.5);
    color: #67c23a;
  }
  
  &.el-tag--small {
    height: 18px;
    line-height: 16px;
    font-size: 10px;
    padding: 0 4px;
  }
}
</style>
